// html
document.writeln("  <div class=\'topdiv\'>");
document.writeln("    <div class=\'logoname\'>曦雨</div>");
document.writeln("    <div class=\'menu\'>");
document.writeln("      <router-link to=\'/login\' class=\'link\'>登录</router-link>");
document.writeln("      <router-link to=\'/index\' class=\'link\'>首页</router-link>");
document.writeln("      <div class=\'link\' @click=\'jump()\'>我的</div>");
document.writeln("      <div class=\'avatar\'><img src=\'../static/up;oad/category/爱律头像.jpg\'></div>");
document.writeln("      <div class=\'link\' @click=\'logout()\'>退出</div>");
document.writeln("    </div>");
document.writeln("  </div>");
document.writeln("");

// CSS
document.writeln("<style >");
document.writeln(".menu {");
document.writeln("  display: flex;");
document.writeln("  height: 60px;");
document.writeln("  width: 100%;");
document.writeln("  line-height: 60px;");
document.writeln("  position: fixed;");
document.writeln("  left: 80%;");
document.writeln("}");
document.writeln("");
document.writeln(".link {");
document.writeln("  text-decoration: none;");
document.writeln("  color: rgb(255, 255, 255);");
document.writeln("  padding: 0 10px;");
document.writeln("}");
document.writeln(".logoname {");
document.writeln("  font-size: 30px;");
document.writeln("  font-weight: 900;");
document.writeln("  position: fixed;");
document.writeln("  left: 30px;");
document.writeln("  line-height: 60px;");
document.writeln("  background-image: -webkit-linear-gradient(");
document.writeln("    left,");
document.writeln("    blue,");
document.writeln("    #66ffff 10%,");
document.writeln("    #cc00ff 20%,");
document.writeln("    #cc00cc 30%,");
document.writeln("    #ccccff 40%,");
document.writeln("    #00ffff 50%,");
document.writeln("    #ccccff 60%,");
document.writeln("    #cc00cc 70%,");
document.writeln("    #cc00ff 80%,");
document.writeln("    #66ffff 90%,");
document.writeln("    blue 100%");
document.writeln("  );");
document.writeln("  -webkit-text-fill-color: transparent;");
document.writeln("  background-clip: text;");
document.writeln("  -webkit-background-clip: text;");
document.writeln("  background-size: 200% 100%;");
document.writeln("  animation: masked-animation 4s linear infinite;");
document.writeln("}");
document.writeln("@keyframes masked-animation {");
document.writeln("  0% {");
document.writeln("    background-position: 0 0;");
document.writeln("  }");
document.writeln("  100% {");
document.writeln("    background-position: -100% 0;");
document.writeln("  }");
document.writeln("}");
document.writeln(".topdiv {");
document.writeln("  width: 100%;");
document.writeln("  height: 60px;");
document.writeln("  background-color: rgb(42, 42, 42);");
document.writeln("  top: 0;");
document.writeln("  left: 0;");
document.writeln("  font-size: 20px;");
document.writeln("  position: fixed;");
document.writeln("  z-index: 999999;");
document.writeln("}");
document.writeln(".link:hover {");
document.writeln("  filter: drop-shadow(0 0 2em #141414aa);");
document.writeln("  background-color: rgba(169, 169, 169, 0.8);");
document.writeln("}");
document.writeln(".avatar{");
document.writeln("    width: 45px;");
document.writeln("    height: 45px;");
document.writeln("    border-radius: 50%;");
document.writeln("    overflow: hidden;");
document.writeln("    margin-top: 7.5px;");
document.writeln("}");
document.writeln(".avatar img{");
document.writeln("    transform: translate(-20%, -20%);");
document.writeln("   width: 80px;");
document.writeln("   height: 80px;");
document.writeln("}");
document.writeln(".avatar:hover {");
document.writeln("  filter: drop-shadow(0 0 2em #141414aa);");
document.writeln("  background-color: rgba(169, 169, 169, 0.8);");
document.writeln("}");
document.writeln("</style>");
